<script setup lang="ts">
import { IRegion } from '@/types/region';
import { ref, watch } from 'vue';
import json from './data.json'
// typescript
interface IProps {
  /**
   * 标题
   */
  title?: string
  /**
   * 默认数据
   */
  value?: number[]
}

interface IEmits {
  (e: "confirm", value: IRegion[]): void
}

const emits = defineEmits<IEmits>();
const props = withDefaults(defineProps<IProps>(), {
  title: "请选择地区",
  value: () => [0, 0, 0]
});
const popup = ref();
const data = json as any;
const province = ref<IRegion[]>(data);
const city = ref<IRegion[]>(province.value[0].children);
const area = ref<IRegion[]>(city.value[0].children);
const value = ref<number[]>(props.value);

// 选择器变化
const onPickerChange = (ev: any) => {
  const val = ev.detail.value;
  const c1 = value.value[0];
  const c2 = value.value[1];
  const data = [val[0], val[1], val[2]];
  // 判断滑动的是否第1列
  if (c1 !== val[0]) {
    data[1] = data[2] = 0;
  } else if (c2 !== val[1]) {
    // 判断滑动的是否第2列
    data[2] = 0;
  }
  value.value = data;
  setChangeNode();
}

// 设置变化节点
const setChangeNode = () => {
  city.value = province.value[value.value[0]].children;
  area.value = city.value[value.value[1]].children;
}

// 显示
const onShow = () => {
  console.log(43);
  
  popup.value && popup.value.open("bottom");
}

// 取消
const onCancel = () => {
  popup.value && popup.value.close();
}

// 确认
const onConfirm = () => {
  const select = JSON.parse(JSON.stringify(province.value[value.value[0]]));
  const column_1 = select;
  const column_2 = JSON.parse(JSON.stringify(column_1.children[value.value[1]]));
  const column_3 = JSON.parse(JSON.stringify(column_2.children[value.value[2]]));
  // 清除掉不需要的子节点
  column_1.children = undefined;
  column_2.children = undefined;
  column_3.children = undefined;
  emits('confirm', [column_1, column_2, column_3]);
  onCancel();
}

defineExpose({
  onShow,
  onCancel
})
</script>

<!-- 省市区选择器 由于uni-app内置组件提供的picker太卡且省市区选择器不支持App H5端 这里自己封装一个 -->
<!-- 基于picker-view pop 组件封装 -->
<template>
  <view class="w-components-container w-picker-region">
    <view @click="onShow">
      <slot></slot>
    </view>
    <uni-popup ref="popup">
      <view class="picker-box">
        <view class="picker-header">
          <view class="cancel" hover-class="hover-class-opacity" @click="onCancel">取消</view>
          <view class="title">{{ title }}</view>
          <view class="confirm" hover-class="hover-class-opacity" @click="onConfirm">确定</view>
        </view>
        <picker-view class="picker-view" :value="value" @change="onPickerChange">
          <picker-view-column>
            <template v-for="(item, index) in province" :key="index">
              <view class="item">{{ item.name }}</view>
            </template>
          </picker-view-column>
          <picker-view-column>
            <template v-for="item in city">
              <view class="item">{{ item.name }}</view>
            </template>
          </picker-view-column>
          <picker-view-column>
            <template v-for="item in area">
              <view class="item">{{ item.name }}</view>
            </template>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
// scss
$h: 600rpx;
$header-height: 80rpx;
.picker-box {
  height: $h;
  background-color: $text-color;
  background-color: #fff;
  padding: 0 30rpx;
}

.picker-header {
  height: $header-height;
  display: flex;
  align-items: center;

  view {
    font-size: 28rpx;
  }

  .cancel {
    color: #969799;
  }

  .confirm {
    color: #576b95;
  }

  .cancel, .confirm {
    padding: 0 20rpx;
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
  }
}
.picker-view {
  // width: 750rpx;
  height: calc(100% - $header-height);
  // margin-top: 20rpx;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>